import { ref, onUnmounted } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
export const useObserver = (apiFn) => {
  // 实现数据懒加载 // 当组件进入可视区后再发送ajax请求数据,渲染页面
  // 优点: 提高页面渲染性能 减轻服务器压力
  const target = ref(null)
  // target既可以是组件也可以是DOM对象
  // isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
  // 对于目标target是否进入视口区域的监听会一直进行不会只监听一次
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // [{ isIntersecting }] 数组套对象解构
      // console.log(isIntersecting)
      // 进入可视区后
      if (isIntersecting) {
        // 发送请求
        apiFn()
        // 停止监控(类似于定时器 返回id 停止定时器)
        stop()
      }
    },
    {
      threshold: 0
    }
  )

  return { target }
}

// 倒计时
export const useCountDown = (time) => {
  const count = ref(0)
  const { pause, resume } = useIntervalFn(() => {
    /* your function */
    count.value--
    if (count.value <= 0) {
      pause()
    }
  }, 1000, {
    // 不要立即开始倒计时
    immediate: false
  })

  const start = () => {
    // 判断结果是0 重新开始
    if (count.value === 0) {
      count.value = time
    }
    // 开始倒计时
    resume()
  }

  // 清除定时器
  onUnmounted(() => {
    pause()
  })

  return { start, pause, count }
}
